
<template>
    <div id="main">
        <ks-select
            v-model="value2"
            placeholder="选择业务"
            methods-fn="get"
            api-url="/ks-data-support/bigdata/getmenu"
            :search-params="{
                searchKey:'filterLicenseNumber',
                page:1,
                size:30
            }"
            :response-transform-fn="responseTransformFn"
        />
        <el-button @click="drawer = true" type="text" style="margin-left: 16px;">
            筛选为度
            <i class="el-icon-plus"></i>
        </el-button>
        <el-drawer
            title="我是标题"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose"
            style="margin-top:60px;"
        >
            <div class="drawerCon">
                维度
                <div
                    v-for="item in directionArr"
                    :key="item"
                    class="drawer"
                >
                    <p @click="checkDirection(item)">{{item}}</p>
                    <ks-select
                        v-model="value2"
                        placeholder="请选择"
                        api-url="/rest/vehicle/vehicle/list"
                        :search-params="{
                            searchKey:'filterLicenseNumber',
                            page:1,
                            size:30
                        }"
                        :response-transform-fn="responseTransformFn"
                    />
                </div>
                <div
                    v-for="item in directionArr"
                    :key="item"
                    class="drawer"
                >
                    <p @click="checkDirection(item)">{{item}}</p>
                    <ks-select
                        v-model="value2"
                        placeholder="请选择"
                        api-url="/rest/vehicle/vehicle/list"
                        :search-params="{
                            searchKey:'filterLicenseNumber',
                            page:1,
                            size:30
                        }"
                        :response-transform-fn="responseTransformFn"
                    />
                </div>
                <div
                    v-for="item in directionArr"
                    :key="item"
                    class="drawer"
                >
                    <p @click="checkDirection(item)">{{item}}</p>
                    <ks-select
                        v-model="value2"
                        placeholder="请选择"
                        api-url="/rest/vehicle/vehicle/list"
                        :search-params="{
                            searchKey:'filterLicenseNumber',
                            page:1,
                            size:30
                        }"
                        :response-transform-fn="responseTransformFn"
                    />
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>

// import { getDataReportInfoYear } from '@/api/etcwxApi'
// import maintenanceModule from './homeModule';
// import { searchParamsComputed } from '@/utils'
// const computed = searchParamsComputed(Object.keys(maintenanceModule.state.postParams), 'homeModule');

export default {
    components: {

    },
    data () {
        return {
            drawer: false,
            direction: 'rtl',
            // directionArr:["会员身份","新老用户","地域"]
            directionArr:["会员身份"]
        }
    },
    computed: {

    },
    created () {

    },
    mounted () {
    },
    methods: {
        responseTransformFn (list, setOptionsFn) {
            setOptionsFn(list.map(({ name, value }) => {
                return {
                    value: value,
                    label: name,
                }
            }));
        },
        // 选择筛选维度
        checkDirection(condition){
            console.log(condition);
            this.$store.commit(this.vuexModelName + '/updatePostParams', {
                condition:condition,
            })
            this.$emit("searchChart",condition)
        }
    }
}
</script>
<style lang="scss" scoped>
.direction {
    width:200px;
    height:32px;
    line-height: 32px;
    text-indent: 10px;
    font-size: 14px;
    border:1px solid #DCDFE6;
    color:#606266
}
.drawerCon {
    padding: 20px;
    .drawer {
        padding: 0 20px;
    }
}

</style>
